<template>
  <div class="home">
    <!-- <Header /> -->
    <div class="content" :style="{ backgroundImage: 'url(' + bgImg + ')' }">
      <!-- 内容区域 -->
      <div class="contentHeader">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="contentHeaderLeft">
              <span class="contentHeaderLeft"
                >承诺 <span style="padding: 0 0.1rem">· </span>诚信</span
              >
              <span class="contentHeaderLeft"
                >公平 <span style="padding: 0 0.1rem">· </span> 公开</span
              >
              <span class="contentHeaderLeft"
                >专注<span style="padding: 0 0.1rem">· </span> 合作</span
              >
            </div>
          </el-col>
          <el-col :span="16">
            <div style="display: flex; justify-content: space-between">
              <div></div>
              <div class="contentHeaderRight">
                <div class="contentHeaderRightTitle">股票代码：688362</div>
                <div class="contentHeaderRightTitle">股票简称：甬矽电子</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="contentBox">
        <div>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="jtgg">
                <div class="jtggTitle">
                  <div class="jtggTitleLeft">
                    <span
                      ><img src="../assets/img/jtgg.png" alt="" />公司公告</span
                    >
                  </div>
                  <div class="jtggTitleRight" @click="listMore('公司公告')">
                    <span>更多 >></span>
                  </div>
                </div>
                <div
                  class="jtgg-loading"
                  style="height: 2.55rem"
                  v-loading="jtggLoading"
                >
                  <div
                    class="jtggBox"
                    v-for="(item, index) in companyNotice"
                    :key="index"
                  >
                    <!-- <div class="jtggBoxOne" v-if="index == 0" @click="openPage(item.openLink)">
                      <div class="jtggBoxOneTop">
                        <div class="jtggBoxOnetitle">
                          <span>
                            <img src="../assets/img/new.png" alt="" />{{ item.title
                            }}</span>
                        </div>
                        <div class="jtggBoxOnetime">{{ item.releaseTime }}</div>
                      </div>
                    </div> -->
                    <div class="jtggBoxTwo" @click="openPage(item.openLink)">
                      <div class="jtggBoxTwoLeft">
                        <!--                        <img src="../assets/img/new.png" alt="" v-if="item.isNew == 1" />-->
                        <img
                          :src="require('@/assets/img/组 215@2x.png')"
                          alt=""
                          v-if="item.isNew == 1"
                        />
                        <span>{{ item.title }}</span>
                      </div>
                      <div class="jtggBoxTwoRight">{{ item.releaseTime }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="16">
              <div class="jtyw">
                <div class="jtggTitle">
                  <div class="jtggTitleLeft">
                    <span
                      ><img src="../assets/img/jtyw.png" alt="" />公司要闻</span
                    >
                  </div>
                  <div class="jtggTitleRight" @click="listMore('公司要闻')">
                    <span>更多 >> </span>
                  </div>
                </div>
                <div class="jtggBoxs" v-loading="jgywLoading">
                  <div class="jtggBoxLeft">
                    <el-carousel
                      height="100%"
                      :interval="4000"
                      indicator-position="none"
                    >
                      <el-carousel-item
                        v-for="(item, index) in companyNewsbg"
                        :key="index"
                      >
                        <img
                          :src="item.portalurl"
                          alt=""
                          style="width: 100%"
                          @click="openNews(item.openurl)"
                        />
                        <div class="boxsss">
                          <span>{{ item.title }}</span>
                        </div>
                        <!-- <div>
                          <span>{{ item.title }}</span>
                        </div> -->


                      </el-carousel-item>
                    </el-carousel>
                  </div>
                  <div class="jtggBoxRight">
                    <div
                      class="jtggBox"
                      v-for="(item, index) in companyNews"
                      :key="index"
                    >
                      <!-- <div class="jtggBoxOne" v-if="index == 0" @click="openPage(item.openLink)">
                        <div class="jtggBoxOneTop">
                          <div class="jtggBoxOnetitle">
                            <span>
                              <img src="../assets/img/new.png" alt="" />{{ item.title
                              }}</span>
                          </div>
                          <div class="jtggBoxOnetime">{{ item.releaseTime }}</div>
                        </div>
                      </div> -->
                      <div class="jtggBoxTwo" @click="openPage(item.openLink)">
                        <div class="jtggBoxTwoLeft">
                          <img
                            src="../assets/img/new.png"
                            alt=""
                            v-if="item.isNew == 1"
                          />
                          <span>{{ item.title }}</span>
                        </div>
                        <div class="jtggBoxTwoRight">
                          {{ item.releaseTime }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="boxs">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="jtrl">
                <div class="jtggTitle">
                  <div class="jtggTitleLeft">
                    <span
                      ><img src="../assets/img/jtrl.png" alt="" />公司日历</span
                    >
                  </div>
                </div>
                <div class="jtggBox">
                  <lunar-calendar />
                </div>
              </div>
            </el-col>
            <el-col :span="16">
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="ygfc">
                    <div class="jtggTitle">
                      <div class="jtggTitleLeft">
                        <span
                          ><img
                            src="../assets/img/ygfc.png"
                            alt=""
                          />员工风采</span
                        >
                      </div>
                      <div class="jtggTitleRight" @click="listMore('员工风采')">
                        <span>更多 >> </span>
                      </div>
                    </div>

                    <div
                      class="jtggBox"
                      v-loading="ygfcLoading"
                      v-if="demeanorList.length > 0"
                    >
                      <div
                        class="jtggBoxBox"
                        v-for="(item, index) in demeanorList"
                        :key="index"
                        @click="openPage(item.openLink)"
                      >
                        <div class="jtggBoxBoxLeft">
                          <img :src="item.photoUrl" alt="" />
                        </div>
                        <div class="jtggBoxBoxRight">
                          <div class="jtggBoxBoxRightTitle">
                            <span>
                              <img
                                src="../assets/img/new.png"
                                alt=""
                                v-if="item.isNew == 1"
                              />
                              <!--                              <img src="../assets/img/new.png" alt="" />-->
                              {{ item.title }}
                            </span>
                          </div>
                          <div class="jtggBoxBoxRightTime">
                            {{ item.releaseTime }}
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="jtggBox" v-else>
                      <el-empty description="暂无数据"></el-empty>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="bottomRight">
                    <div class="bottomRightTop">
                      <div class="whsc">
                        <div class="jtggTitle">
                          <div class="jtggTitleLeft">
                            <span
                              ><img
                                src="../assets/img/whsc.png"
                                alt=""
                              />行业电子书</span
                            >
                          </div>
                          <div
                            class="jtggTitleRight"
                            @click="dialogEbook = true"
                          >
                            <span>更多 >> </span>
                          </div>
                        </div>
                        <div class="jtggBox" v-loading="whscLoading">
                          <div
                            class="jtggBoxopen"
                            v-for="(item, index) in ebookList"
                            :key="index"
                          >
                            <div class="jtggBoxopenimg">
                              <img :src="item.logo" alt="" />
                              <div class="jtggBoxopenTitle">
                                {{ item.title }}
                              </div>
                            </div>
                            <div class="jtggBoxopenBtn">
                              <span @click="openPage(item.openLink)"
                                >查看详情</span
                              >
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="bottomRightBottom">
                      <div class="dqzc">
                        <div class="jtggTitle">
                          <div class="jtggTitleLeft">
                            <span
                              ><img
                                src="../assets/img/dqzc.png"
                                alt=""
                              />党群之窗</span
                            >
                          </div>
                          <div
                            class="jtggTitleRight"
                            @click="listMore('党群之窗')"
                          >
                            <span>更多>></span>
                          </div>
                        </div>
                        <div
                          class="jtggBox"
                          v-loading="dqzcLoading"
                          v-if="pmList.length > 0"
                        >
                          <el-carousel height="100%" :interval="4000">
                            <el-carousel-item
                              v-for="(item, index) in pmList"
                              :key="index"
                            >
                              <div
                                class="carsous"
                                @click="openPage(item.openLink)"
                              >
                                <div class="carsousLeft">
                                  <div class="carsousLeftImg">
                                    <img :src="item.photoUrl" alt="" />
                                  </div>
                                </div>
                                <div class="carsousRight">
                                  <div class="carsousRightTitle">
                                    <span
                                      style="
                                        font-family: PingFang SC;
                                        font-weight: bold;
                                        font-size: 0.1777777778rem;
                                        color: #323333;
                                      "
                                    >
                                      <img
                                        src="../assets/img/new.png"
                                        alt=""
                                        v-if="item.isNew == 1"
                                      />
                                      <!--                                      <img src="../assets/img/new.png" alt="" />-->
                                      {{ item.title }}
                                    </span>
                                    <div
                                      class="carsousRight_title"
                                      style="
                                        display: flex;
                                        justify-content: space-between;
                                        position: absolute;
                                        bottom: 10px;
                                        right: 10px;
                                      "
                                    >
                                      <div
                                        class="carsousRight_title"
                                        style="
                                          font-family: DIN Next LT Pro;
                                          font-weight: 400;
                                          font-size: 0.1777777778rem;
                                          color: #999899;
                                          padding-top: 0.2rem;
                                        "
                                      >
                                        {{ item.releaseTime }}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </el-carousel-item>
                          </el-carousel>
                        </div>
                        <div class="jtggBox" v-else>
                          <el-empty
                            description="暂无数据"
                            :image-size="50"
                            style="height: 60%"
                          ></el-empty>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-dialog
        title="行业电子书"
        :visible.sync="dialogEbook"
        custom-class="eBook"
      >
        <ul class="eBook-box" ref="scrollContainer">
          <li v-for="(item, index) in ebookListAll" :key="index">
            <div class="eBook-title">
              <img :src="item.logo" alt="" /><span>{{ item.title }}</span>
            </div>
            <div class="eBook-bt">
              <span @click="openPage(item.openLink)">查看详情</span>
            </div>
          </li>
        </ul>
        <i class="el-icon-d-arrow-right" @click="ebookMore"></i>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import lunarCalendar from "../components/AddCalendar.vue";
import { formatDate } from "@/utils/helper";
import {
  getPortalBg,
  getNoticeList,
  getNewsList,
  getDemeanorList,
  getEbookList,
  getPmList,
} from "@/api/index";

export default {
  name: "CompanyHome",
  data() {
    return {
      isScrolling: [],
      data: null,
      formattedDate: null,
      sid: "",
      bgImg: "",
      portalObj: {
        nowPage: 0,
        pageNum: 4,
        fieldQuery: {
          title: "",
          publisher: "",
          signer: "",
          dept: "",
          releaseTime: {
            beginTime: "",
            endTime: "",
          },
        },
        order: {
          title: "",
          publisher: "",
          signer: "",
          dept: "",
          releaseTime: "",
        },
      },
      companyNotice: [],
      companyNewsbg: [],
      companyNews: [],
      demeanorList: [],
      ebookList: [],
      ebookListAll: [],
      pmList: [],
      value: new Date(), // 当前的日期
      dialogEbook: false,
      jtggLoading: true,
      jgywLoading: true,
      ygfcLoading: true,
      whscLoading: true,
      dqzcLoading: true,
    };
  },
  components: {
    Header,
    lunarCalendar,
  },
  methods: {
    checkAllTextOverflow() {
      this.$refs.titleRefs.forEach((element, index) => {
        this.isScrolling[index] = element.scrollWidth > element.clientWidth;
      });
    },
    checkTextOverflow(index) {
      this.$nextTick(() => {
        const element = this.$refs.titleRefs[index];
        if (element) {
          this.isScrolling[index] = element.scrollWidth > element.clientWidth;
        }
      });
    },

    openPage(url) {
      //const url = `http://47.94.11.113:9999/portal/r/w?sid=${this.sid}&cmd=portal.grounp.openlist&page=${item}`; // 将值附加到URL中
      if (url.indexOf("http") >= 0) {
        window.open(url, "_blank");
      } else {
        window.open("https://" + url, "_blank");
      }
    },
    openNews(url) {
      window.open(url, "_blank");
    },
    // changeNews(active, val) {
    //   console.log("active", active);
    // },
    ebookMore() {
      // 获取到滚动容器的引用
      const container = this.$refs.scrollContainer;
      console.log(container, "滚动数据");
      // 设置滚动的距离，这里设置为每次点击滚动100px
      const scrollAmount = 100;
      // 使用scrollBy方法向下滚动
      container.scrollBy({ top: scrollAmount, behavior: "smooth" });
    },
    // 获取背景图
    getPortalBg() {
      const _this = this;
      getPortalBg(_this.sid)
        .then((response) => {
          _this.bgImg = response.data.backgroundPhoto;
        })
        .catch((error) => {
          console.error("获取背景图失败", error);
          if (
            error.response &&
            error.response.data &&
            error.response.data.errorCode === "400"
          ) {
            console.error(error.response.data.msg);
          }
        });
    },
    // 获取公告信息
    getNoticeList() {
      const _this = this;
      getNoticeList(_this.sid, _this.portalObj)
        .then((response) => {
          _this.companyNotice = response.data.list;
          _this.jtggLoading = false;
        })
        .catch((error) => {
          console.error("获取公告列表失败", error);
          if (
            error.response &&
            error.response.data &&
            error.response.data.errorCode === "400"
          ) {
            console.error(error.response.data.msg);
          }
        });
    },
    // 获取要闻信息
    getNewsList() {
      const _this = this;
      getNewsList(_this.sid, _this.portalObj)
        .then((response) => {
          _this.companyNewsbg = response.data.photos;
          _this.companyNews = response.data.list;
          _this.jgywLoading = false;
          this.$nextTick(() => {
            this.checkAllTextOverflow();
          });
        })
        .catch((error) => {
          console.error("获取要闻列表失败", error);
          if (
            error.response &&
            error.response.data &&
            error.response.data.errorCode === "400"
          ) {
            console.error(error.response.data.msg);
          }
        });
    },
    // 获取风采信息
    getDemeanorList() {
      const _this = this;
      getDemeanorList(_this.sid, _this.portalObj)
        .then((response) => {
          _this.demeanorList = response.data.list;
          _this.ygfcLoading = false;
        })
        .catch((error) => {
          console.error("获取风采列表失败", error);
          if (
            error.response &&
            error.response.data &&
            error.response.data.errorCode === "400"
          ) {
            console.error(error.response.data.msg);
          }
        });
    },
    // 获取电子书信息
    getEbookList() {
      const _this = this;
      getEbookList(_this.sid)
        .then((response) => {
          _this.ebookList = response.data.slice(0, 4);
          _this.ebookListAll = response.data;
          _this.whscLoading = false;
        })
        .catch((error) => {
          console.error("获取电子书列表失败", error);
          if (
            error.response &&
            error.response.data &&
            error.response.data.errorCode === "400"
          ) {
            console.error(error.response.data.msg);
          }
        });
    },
    // 获取党群信息
    getPmList() {
      const _this = this;
      getPmList(_this.sid, _this.portalObj)
        .then((response) => {
          _this.pmList = response.data.list;
          _this.dqzcLoading = false;
        })
        .catch((error) => {
          console.error("获取党群列表失败", error);
          if (
            error.response &&
            error.response.data &&
            error.response.data.errorCode === "400"
          ) {
            console.error(error.response.data.msg);
          }
        });
    },
    listMore(item) {
      if ("notice" == item) {
        document.frmLogin.action = "./w";
        document.frmLogin.submit();
      } else {
        //正式环境请替换url是window的。
        //const url = window.location.href+`?sid=${_this.sid}&cmd=portal.grounp.openlist&page${item}`; // 将值附加到URL中
        const url = `/portal/r/w?sid=${this.sid}&cmd=portal.grounp.openlist&page=${item}`; // 将值附加到URL中
        console.log(url, "url");
        window.open(url, "_blank");
      }
    },
    toyw() {
      this.$router.push({ name: "xw" });
    },

    formatCurrentDate() {
      this.formattedDate = formatDate(new Date());
    },
    fetchUserData() {},
  },
  computed: {},
  mounted() {
    const _this = this;
    _this.sid = _this._sid;
    console.log(">>>>>>>>>>>>>>>>>>>>>>>sid123" + _this.sid);
    _this.getPortalBg();
    _this.formatCurrentDate();
    _this.getNoticeList();
    _this.getNewsList();
    _this.getDemeanorList();
    _this.getEbookList();
    _this.getPmList();
  },
};
</script>
<style lang="scss" scoped>
.home {
  .content {
    /* 内容区域样式*/
    background-image: url("../assets/img/bg.png");
    /* 替换为你的背景图片路径*/
    background-size: 100% 100%;
    /* 填充整个区域*/
    background-position: center;
    /* 居中对齐*/
    // height: calc(105vh - 60px);
    /* 计算视口高度减去顶部高度*/
    padding: 0.3333333333333333rem;

    .contentHeader {
      /* margin-top:0.14444444444444443rem;*/

      .contentHeaderLeft {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .contentHeaderLeft {
          background-image: url("../assets/img/circleju.png");
          /* 替换为你的背景图片路径*/
          background-size: 100% 100%;
          font-family: PingFang SC;
          font-weight: bold;
          font-size: 0.24444444444444444rem;
          color: #2c64df;
          margin-right: 0.2111111111111111rem;
          padding: 0.18888888888888888rem 0.3788888888888889rem;
        }

        .contentHeaderLeft:last-of-type {
          margin-right: 0;
          /* 或者设置为其他你需要的值，或者直接移除这个样式 */
        }
      }

      .contentHeaderRight {
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 0.2222222222222222rem;
        color: #fefefe;
        line-height: 0.3333333333333333rem;
        text-align: left;
      }
    }

    .contentBox {
      padding-top: 0.3111111111111111rem;

      .jtggTitleRight {
        cursor: pointer;
      }

      .jtgg {
        box-shadow: 0rem 0.022222222222222223rem 0.08888888888888889rem 0rem
          rgba(50, 95, 172, 0.1);
        border-radius: 0.1111111111111111rem;
        background: linear-gradient(
          135deg,
          rgb(239 241 246),
          rgba(255, 255, 255, 1)
        );
        padding: 0.3333333333333333rem;

        .jtggTitle {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 0.2rem;
          border-bottom: 0.011111111111111112rem solid #ededec;

          .jtggTitleLeft {
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 0.2rem;
            color: #323333;

            img {
              vertical-align: middle;
              margin-top: -0.05555555555555555rem;
              width: 0.2222222222222222rem;
              height: 0.2222222222222222rem;
              margin-right: 0.13333333333333333rem;
            }
          }

          .jtggTitleRight {
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 0.15555555555555556rem;
            color: #2c64df;
          }
        }

        .jtgg-loading {
          padding-top: 0.3rem;

          ::v-deep .el-loading-mask {
            background-color: transparent;
          }

          .jtggBox {
            margin-top: 0.4rem;

            .jtggBoxOne {
              cursor: pointer;

              .jtggBoxOneTop {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .jtggBoxOnetitle {
                  text-align: left;
                  width: 80%;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: normal;
                  height: 0.8rem;

                  span {
                    font-family: PingFang SC;
                    font-size: 0.3125rem;
                    color: #333333;

                    img {
                      width: 0.4rem;
                      height: 0.2rem;
                      vertical-align: middle;
                      margin-right: 0.1111111111111111rem;
                      margin-top: -0.044444444444444446rem;
                    }
                  }
                }

                .jtggBoxOnetime {
                  font-family: DIN Next LT Pro;
                  font-weight: 400;
                  font-size: 0.17777777777777778rem;
                  color: #999899;
                }
              }

              .jtggBoxOneBottom {
                font-family: PingFang SC;
                font-weight: 400;
                font-size: 0.15555555555555556rem;
                color: #999899;
                line-height: 0.26666666666666666rem;
                text-align: left;
                margin-top: 0.2rem;
              }
            }

            .jtggBoxTwo {
              display: flex;
              justify-content: space-between;
              cursor: pointer;

              .jtggBoxTwoLeft {
                font-family: PingFang SC;
                display: flex;
                align-items: center;

                font-size: 0.21875rem;
                color: #323333;
                width: 80%;
                text-align: left;

                img {
                  margin-right: 0.1rem;
                  width: 0.4rem;
                  height: 0.2rem;
                }

                span {
                  flex: 1;
                  white-space: nowrap;
                  /* 确保文本不换行 */
                  overflow: hidden;
                  /* 隐藏超出容器的内容 */
                  text-overflow: ellipsis;
                  /* 超出部分显示省略号 */
                }
              }

              .jtggBoxTwoRight {
                font-family: DIN Next LT Pro;
                font-weight: 400;
                font-size: 0.17777777777777778rem;
                color: #999899;
              }
            }
          }

          .jtggBox:nth-child(2) {
            margin-top: 0;
          }
          .jtggBox:nth-child(2) .jtggBoxTwoLeft {
            font-size: 0.3rem;
            font-weight: 700;
          }
        }
      }

      .jtyw {
        box-shadow: 0rem 0.022222222222222223rem 0.08888888888888889rem 0rem
          rgba(50, 95, 172, 0.1);
        border-radius: 0.1111111111111111rem;
        background: linear-gradient(
          135deg,
          rgb(239 241 246),
          rgba(255, 255, 255, 1)
        );
        padding: 0.3333333333333333rem;

        .jtggTitle {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 0.2rem;
          border-bottom: 0.011111111111111112rem solid #ededec;

          .jtggTitleLeft {
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 0.2rem;
            color: #323333;

            img {
              vertical-align: middle;
              margin-top: -0.05555555555555555rem;
              width: 0.2222222222222222rem;
              height: 0.2222222222222222rem;
              margin-right: 0.13333333333333333rem;
            }
          }

          .jtggTitleRight {
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 0.15555555555555556rem;
            color: #2c64df;
          }
        }

        .jtggBoxs {
          display: flex;
          height: 2.85rem;

          ::v-deep .el-loading-mask {
            background-color: transparent;
          }

          .jtggBoxLeft {
            flex: 0 0 40%;
            box-shadow: 0rem 0.022222222222222223rem 0.08888888888888889rem 0rem
              rgba(50, 95, 172, 0.1);
            border-radius: 0.1111111111111111rem;

            .el-carousel {
              ::v-deep .el-carousel__container {
                border-radius: 10px;
                overflow: hidden;

                .el-carousel__item {
                  .boxsss {
                    width: 100%;
                    height: 0.5rem;
                    line-height: 0.5rem;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    background-color: rgba(60, 60, 60, 0.9);
                    text-align: left;
                   text-indent: 10px;
                  }
                  span {
                    font-size: 0.1875rem;
                    color: #ffffff;
                    width: 100%;
                    height: 0.5rem;
                    line-height: 0.5rem;
                    position: absolute;
                    bottom: 0;
                    left: 0;

                    text-align: left;

                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;

                  }

                }
              }
            }

            .el-carousel--horizontal {
              height: 100%;
            }

            ::v-deep .el-carousel__indicators--horizontal {
              left: 80%;
            }

            ::v-deep .el-carousel__indicator--horizontal .el-carousel__button {
              width: 0.1111111111111111rem;
              height: 0.1111111111111111rem;
              background: transparent;
              border: 1px solid #ffffff;
              border-radius: 50%;
              opacity: 0.5;
            }

            ::v-deep
              .el-carousel__indicator--horizontal.is-active
              .el-carousel__button {
              width: 0.1111111111111111rem;
              height: 0.1111111111111111rem;
              background: #ffffff;
              border-radius: 50%;
              opacity: 1;
            }
          }

          .jtggBoxRight {
            margin-left: 0.4111111111111111rem;
            width: 57%;
            padding-top: 0.3rem;

            .jtggBox {
              margin-top: 0.4rem;

              .jtggBoxOne {
                cursor: pointer;

                .jtggBoxOneTop {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;

                  .jtggBoxOnetitle {
                    text-align: left;
                    width: 80%;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: normal;
                    height: 0.8rem;

                    span {
                      font-family: PingFang SC;
                      font-weight: 400;
                      font-size: 0.3125rem;
                      color: #323333;

                      img {
                        width: 0.4rem;
                        height: 0.2rem;
                        vertical-align: middle;
                        margin-right: 0.1111111111111111rem;
                        margin-top: -0.044444444444444446rem;
                      }
                    }
                  }

                  .jtggBoxOnetime {
                    font-family: DIN Next LT Pro;
                    font-weight: 400;
                    font-size: 0.17777777777777778rem;
                    color: #999899;
                  }
                }

                .jtggBoxOneBottom {
                  font-family: PingFang SC;
                  font-weight: 400;
                  font-size: 0.15555555555555556rem;
                  color: #999899;
                  line-height: 0.26666666666666666rem;
                  text-align: left;
                  margin-top: 0.2rem;
                }
              }

              .jtggBoxTwo {
                display: flex;
                justify-content: space-between;
                cursor: pointer;

                .jtggBoxTwoLeft {
                  font-family: PingFang SC;
                  display: flex;
                  align-items: center;
                  font-weight: 500;
                  font-size: 0.21875rem;
                  color: #323333;
                  width: 80%;
                  text-align: left;

                  img {
                    margin-right: 0.1rem;
                    width: 0.4rem;
                    height: 0.2rem;
                  }

                  span {
                    flex: 1;
                    white-space: nowrap;
                    /* 确保文本不换行 */
                    overflow: hidden;
                    /* 隐藏超出容器的内容 */
                    text-overflow: ellipsis;
                    /* 超出部分显示省略号 */
                  }
                }

                .jtggBoxTwoRight {
                  font-family: DIN Next LT Pro;
                  font-weight: 400;
                  font-size: 0.17777777777777778rem;
                  color: #999899;
                }
              }
            }

            .jtggBox:first-child {
              margin-top: 0;
            }
            .jtggBox:nth-child(1) .jtggBoxTwoLeft {
              font-size: 0.3rem;
              font-weight: 700;
            }
          }
        }
      }

      .jtrl {
        margin-top: 0.16666666666666666rem;
        box-shadow: 0rem 0.022222222222222223rem 0.08888888888888889rem 0rem
          rgba(50, 95, 172, 0.1);
        border-radius: 0.1111111111111111rem;
        background: linear-gradient(
          135deg,
          rgb(239 241 246),
          rgba(255, 255, 255, 1)
        );
        padding: 0.3333333333rem 0.3333333333rem 0.259rem;

        .jtggTitle {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 0.2rem;

          .jtggTitleLeft {
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 0.2rem;
            color: #323333;

            img {
              vertical-align: middle;
              margin-top: -0.05555555555555555rem;
              width: 0.2222222222222222rem;
              height: 0.2222222222222222rem;
              margin-right: 0.13333333333333333rem;
            }
          }

          .jtggTitleRight {
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 0.15555555555555556rem;
            color: #2c64df;
          }
        }

        .jtggBox {
          // height: ;
          display: flex;

          .jtggBoxrili {
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .ygfc {
        margin-top: 0.16666666666666666rem;
        box-shadow: 0rem 0.022222222222222223rem 0.08888888888888889rem 0rem
          rgba(50, 95, 172, 0.1);
        border-radius: 0.1111111111111111rem;
        background: linear-gradient(
          135deg,
          rgb(239 241 246),
          rgba(255, 255, 255, 1)
        );
        padding: 0.3333333333333333rem;

        .jtggTitle {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 0.2rem;

          .jtggTitleLeft {
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 0.2rem;
            color: #323333;

            img {
              vertical-align: middle;
              margin-top: -0.05555555555555555rem;
              width: 0.2222222222222222rem;
              height: 0.2222222222222222rem;
              margin-right: 0.13333333333333333rem;
            }
          }

          .jtggTitleRight {
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 0.15555555555555556rem;
            color: #2c64df;
          }
        }

        .jtggBox {
          width: 6.9rem;
          height: 4.56rem;

          ::v-deep .el-loading-mask {
            background-color: transparent;
          }

          .jtggBoxBox {
            margin-bottom: 0.14444444444444443rem;
            display: flex;
            align-items: center;
            cursor: pointer;

            .jtggBoxBoxLeft {
              width: 2rem;
              height: 1.05rem;
              flex: 0 0 2rem;

              img {
                width: 100%;
                height: 100%;
                border-radius: 10px;
              }
            }

            .jtggBoxBoxRight {
              text-align: left;
              margin-left: 0.28888888888888886rem;
              width: 100%;

              .jtggBoxBoxRightTitle {
                display: inline-block;
                text-align: left;

                span {
                  display: -webkit-box;
                  font-family: PingFang SC;
                  font-weight: bold;
                  font-size: 0.17777777777777778rem;
                  color: #323333;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: normal;

                  img {
                    width: 0.4rem;
                    height: 0.2rem;
                    vertical-align: middle;
                  }
                }
              }

              .jtggBoxBoxRightTime {
                padding-top: 0.2222222222222222rem;
                font-family: DIN Next LT Pro;
                font-weight: 400;
                font-size: 0.17777777777777778rem;
                color: #999899;
              }
            }
          }
        }
      }

      .bottomRight {
        display: flex;
        flex-direction: column;

        .bottomRightTop {
          .whsc {
            margin-top: 0.16666666666666666rem;
            box-shadow: 0rem 0.022222222222222223rem 0.08888888888888889rem 0rem
              rgba(50, 95, 172, 0.1);
            border-radius: 0.1111111111111111rem;
            background: linear-gradient(
              135deg,
              rgb(239 241 246),
              rgba(255, 255, 255, 1)
            );
            padding: 0.3333333333333333rem 0.3333333333333333rem
              0.26666666666666666rem 0.3333333333333333rem;

            .jtggTitle {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding-bottom: 0.3rem;

              .jtggTitleLeft {
                font-family: PingFang SC;
                font-weight: bold;
                font-size: 0.2rem;
                color: #323333;

                img {
                  vertical-align: middle;
                  margin-top: -0.05555555555555555rem;
                  width: 0.2222222222222222rem;
                  height: 0.2222222222222222rem;
                  margin-right: 0.13333333333333333rem;
                }
              }

              .jtggTitleRight {
                font-family: PingFang SC;
                font-weight: 400;
                font-size: 0.15555555555555556rem;
                color: #2c64df;
              }
            }

            .jtggBox {
              height: 1.6111111111111112rem;
              display: flex;
              justify-content: space-around;

              ::v-deep .el-loading-mask {
                background-color: transparent;
              }

              ::v-deep.el-carousel {
                height: 100% !important;
              }

              .el-carousel {
                height: 100% !important;
              }

              ::v-deep .el-carousel--horizontal {
                height: 100% !important;
              }

              .jtggBoxopen {
                background-image: url("../assets/img/bookbg.png");
                background-size: 100% 100%;
                padding: 0.1rem 0.1rem;

                .jtggBoxopenimg {
                  display: flex;
                  width: 1.4rem;
                  height: 0.34444444444444444rem;
                  align-items: center;
                  padding-top: 0.2rem;

                  img {
                    width: 0.35rem;
                    height: 0.35rem;
                  }

                  .jtggBoxopenTitle {
                    font-family: PingFang SC;
                    font-size: 0.2rem;
                    color: #ffffff;
                    margin-left: 0.078125rem;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  }
                }

                .jtggBoxopenBtn {
                  margin-top: 0.468755rem;
                  padding-bottom: 0.1111111111111111rem;

                  span {
                    background: #f0f0f0;
                    border-radius: 0.06666666666666667rem;
                    font-family: PingFang SC;
                    font-weight: 400;
                    font-size: 0.13333333333333333rem;
                    color: #2c64df;
                    padding: 0.06666666666666667rem 0.4555555556rem;
                    cursor: pointer;
                  }
                }
              }
            }
          }
        }

        .bottomRightBottom {
          flex: 1;

          .dqzc {
            margin-top: 0.25rem;
            box-shadow: 0rem 0.022222222222222223rem 0.08888888888888889rem 0rem
              rgba(50, 95, 172, 0.1);
            border-radius: 0.1111111111111111rem;
            background: linear-gradient(
              135deg,
              rgb(239 241 246),
              rgba(255, 255, 255, 1)
            );
            padding: 0.3333333333333333rem 0.3333333333333333rem
              0.1362222222222222rem 0.3333333333333333rem;

            .jtggTitle {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding-bottom: 0.3rem;

              .jtggTitleLeft {
                font-family: PingFang SC;
                font-weight: bold;
                font-size: 0.2rem;
                color: #323333;

                img {
                  vertical-align: middle;
                  margin-top: -0.05555555555555555rem;
                  width: 0.2222222222222222rem;
                  height: 0.2222222222222222rem;
                  margin-right: 0.13333333333333333rem;
                }
              }

              .jtggTitleRight {
                font-family: PingFang SC;
                font-weight: 400;
                font-size: 0.15555555555555556rem;
                color: #2c64df;
              }
            }

            .jtggBox {
              height: 1.63rem;
              max-height: 1.63rem;

              ::v-deep .el-loading-mask {
                background-color: transparent;
              }

              .el-carousel--horizontal {
                height: 100% !important;
              }

              ::v-deep .el-carousel__indicators--horizontal {
                left: 70%;
                bottom: 0%;
                z-index: 9999;
              }

              ::v-deep
                .el-carousel__indicator--horizontal
                .el-carousel__button {
                width: 0.16666666666666666rem;
                height: 0.022222222222222223rem;
                background: #333333;
                border: 1px solid #333333;
                opacity: 0.5;
              }

              ::v-deep
                .el-carousel__indicator--horizontal.is-active
                .el-carousel__button {
                width: 0.1111111111111111rem;
                height: 0.1111111111111111rem;
                background: #2c64df;
                border-radius: 50%;
                opacity: 1;
              }

              .carsous {
                display: flex;
                cursor: pointer;

                .carsousLeft {
                  .carsousLeftImg {
                    width: 2.8rem;
                    height: 1.5rem;

                    img {
                      width: 100%;
                      height: 100%;
                      border-radius: 10px;
                    }
                  }
                }

                .carsousRight {
                  text-align: left;
                  margin-left: 0.2222222222222222rem;
                  flex: 1;
                  padding: 0.122rem;

                  .carsousRightTitle {
                    position: relative;
                    font-family: PingFang SC;
                    font-weight: 400;
                    font-size: 0.15555555555555556rem;
                    color: #323333;
                    line-height: 0.26666666666666666rem;
                    height: 100%;

                    span {
                      img {
                        width: 0.4rem;
                        height: 0.2rem;
                        vertical-align: middle;
                        margin-right: 0.03333333333333333rem;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    ::v-deep .eBook {
      width: 40%;
      border-radius: 10px;

      .el-dialog__body {
        padding: 0.26875rem 0.3125rem;
      }

      .el-icon-d-arrow-right {
        color: #e5ecf5;
        transform: rotate(90deg);
        font-size: 0.3rem;
        cursor: pointer;
      }

      .eBook-box {
        list-style-type: none;
        display: flex;
        flex-wrap: wrap;
        height: 3.9rem;
        overflow-y: auto;
        scrollbar-width: none;

        li {
          width: 20%;
          height: 1.8rem;
          background-image: url("../assets/img/bookbg.png");
          background-size: 100% 100%;
          margin-right: 4%;
          margin-top: 2%;

          .eBook-title {
            display: flex;
            align-items: center;
            padding-left: 0.5rem;
            color: white;
            padding: 0.2rem 0.1777777777777778rem;

            img {
              width: 0.3rem;
              height: 0.3rem;
            }

            span {
              margin-left: 0.075rem;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }

          .eBook-bt {
            margin-top: 0.45rem;

            span {
              background: #f0f0f0;
              border-radius: 0.0666666667rem;
              font-family: PingFang SC;
              font-weight: 400;
              font-size: 0.1333333333rem;
              color: #2c64df;
              padding: 0.0666666667rem 0.4555555556rem;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
